import 'package:cbec_app/pages/my/controller/setting_pay_passWord_ctr.dart';
import 'package:flutter/material.dart';
import 'package:get/get_state_manager/src/simple/get_state.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';

///修改支付密码
class SettingPayPassword extends GetView<SettingPayPasswordCtr> {
  const SettingPayPassword({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SettingPayPasswordCtr>(builder: (controller) {
      return Scaffold(
        appBar: AppBar(
          title: const Text(
            '设置支付密码',
            style: TextStyle(fontSize: 18),
          ),
          centerTitle: true, // 标题居中显示
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios), // 自定义返回按钮图标
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 密码输入框
              Container(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Colors.grey.shade300, width: 1),
                  ),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.lock_outlined, color: Colors.red),
                    const SizedBox(width: 8),
                    Expanded(
                      child: TextField(
                        controller: controller.payPassWordController,
                        onChanged: (value) {
                          controller.updatePayPassWord(value);
                        },
                        decoration: const InputDecoration(
                          hintText: '支付密码，请输入6位数字',
                          border: InputBorder.none,
                        ),
                        obscureText: controller.isOpenEye,
                        keyboardType: TextInputType.number,
                      ),
                    ),
                    IconButton(
                      icon: Image.asset(controller.isOpenEye ? 'assets/images/close_eye.png' : 'assets/images/open_eye.png', color: Colors.red, width: 25, height: 25),
                      onPressed: () {
                        controller.toggleEye();
                      },
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),
              // 验证码输入框
              Container(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Colors.grey.shade300, width: 1),
                  ),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.verified_user_outlined, color: Colors.red),
                    const SizedBox(width: 8),
                    Expanded(
                      child: TextField(
                        controller: controller.msgCodeController,
                        onChanged: (value) {
                          controller.updateMsgCode(value);
                        },
                        decoration: const InputDecoration(
                          hintText: '请输入手机验证码',
                          border: InputBorder.none,
                        ),
                        keyboardType: TextInputType.number,
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        controller.fetchVerifyCode();
                      },
                      child: Text(
                        controller.isCountingDown ? '${controller.countdown}s' : '获取验证码',
                        style: TextStyle(color: controller.isCountingDown ? Colors.grey : Colors.blue),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 50),
              // 提交按钮
              SizedBox(
                height: 50,
                child: ElevatedButton(
                  onPressed: () {
                    controller.submit();
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.red,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25),
                    ),
                  ),
                  child: const Text('提交', style: TextStyle(fontSize: 16, color: Colors.white)),
                ),
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      );
    });
  }
}
